<template>
  <div class="grid">
    <div class="col-12">
      <div class="card">
        <Toolbar class="mb-4">
          <template #start>
            <Button :label="$t('common.add')" icon="pi pi-plus" class="p-button-sm p-button-success m-2 " @click="dialogAdd()" v-if="checkAddAuth()" />
            <Button :label="$t('common.delete')" icon="pi pi-trash" class="p-button-sm p-button-danger m-2 "  @click="confirmDeleteSelected" :disabled="!store.selected || !store.selected.length" />
          </template>
        </Toolbar>
        <DataTable v-model:selection="store.selected" class="p-datatable-sm" ref="dt" :value="store.list" dataKey="id" :paginator="true" :rows="store.pageSize" :totalRecords="store.totalCount" :filters="store.filter" v-model:filters="store.filter" :first="store.pageSize*(store.pageNum-1)"
                   paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown" :rowsPerPageOptions="[20,50,100]"
                   :currentPageReportTemplate="$t('common.total') + ' ' + store.totalCount + ' ' + $t('common.row')" responsiveLayout="scroll"
                   lazy filterDisplay="menu" @sort="onEventQuery" @filter="onEventQuery" @page="onEventQuery" :sortField=store.sortField :sortOrder="store.sortOrder">
          <template #header>
            <div class="flex col-12 md:col-12">
              <!-- <div class="flex w-10"> -->
              <div >
                <InputText v-model="store.filter.counterpartyId.value" placeholder="关联的交易对手ID" />
	<InputText v-model="store.filter.counterpartyContactId.value" placeholder="交易对手联系方式ID" />
	<InputText v-model="store.filter.userId.value" placeholder="用户ID" />
	<InputText v-model="store.filter.username.value" placeholder="用户名称" />
	<InputText v-model="store.filter.nickname.value" placeholder="用户昵称" />
	<InputText v-model="store.filter.permissionType.value" placeholder="权限类型" />
	
                <Button icon="pi pi-search" @click="handleQuery()" class="w-4rem"/>
                <Button icon="pi pi-refresh" class="ml-2 p-button-help p-button-text w-3rem" @click="clearFilters()"/>
              </div>
            </div>
          </template>
          <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
          <Column field="counterpartyId" header="关联的交易对手ID" Style="min-width: 150px" > 
  <template #body="{data}"> 
        {{data.counterpartyId}} 
   </template> 
 </Column>
	<Column field="counterpartyContactId" header="交易对手联系方式ID" Style="min-width: 150px" > 
  <template #body="{data}"> 
        {{data.counterpartyContactId}} 
   </template> 
 </Column>
	<Column field="userId" header="用户ID" Style="min-width: 150px" > 
  <template #body="{data}"> 
        {{data.userId}} 
   </template> 
 </Column>
	<Column field="username" header="用户名称" Style="min-width: 150px" > 
  <template #body="{data}"> 
        {{data.username}} 
   </template> 
 </Column>
	<Column field="nickname" header="用户昵称" Style="min-width: 150px" > 
  <template #body="{data}"> 
        {{data.nickname}} 
   </template> 
 </Column>
	<Column field="permissionType" header="权限类型" Style="min-width: 150px" > 
  <template #body="{data}"> 
        {{data.permissionType}} 
   </template> 
 </Column>
	
          <Column headerStyle="min-width:10rem;">
            <template #body="slotProps">
              <Button label="修改" class="p-button-rounded p-button-sm p-button-warning mr-2"  @click="dialogEdit(slotProps.data)" v-if="checkEditAuth()" />
              <Button label="删除" class="p-button-rounded p-button-sm p-button-danger mr-2" @click="dialogDelete(slotProps.data)" v-if="checkDeleteAuth()" />
            </template>
          </Column>
        </DataTable>

        <Dialog v-model:visible="dialog" :header="dialogTitle" :modal="true" class="p-fluid w-6">
          <div class="field mr-3">
  <label>关联的交易对手ID</label><label class="required-icon">*</label>
      <InputText v-model.trim="store.form.counterpartyId" required="true" class="w-12 flex" :class="{'p-invalid': submitted && !store.form.counterpartyId}"  />
      <small class="p-error" v-if="submitted && !store.form.counterpartyId">关联的交易对手ID必填</small></div><div class="field mr-3">
  <label>交易对手联系方式ID</label><label class="required-icon">*</label>
      <InputText v-model.trim="store.form.counterpartyContactId" required="true" class="w-12 flex" :class="{'p-invalid': submitted && !store.form.counterpartyContactId}"  />
      <small class="p-error" v-if="submitted && !store.form.counterpartyContactId">交易对手联系方式ID必填</small></div><div class="field mr-3">
  <label>用户ID</label><label class="required-icon">*</label>
      <InputText v-model.trim="store.form.userId" required="true" class="w-12 flex" :class="{'p-invalid': submitted && !store.form.userId}"  />
      <small class="p-error" v-if="submitted && !store.form.userId">用户ID必填</small></div><div class="field mr-3">
  <label>用户名称</label><label class="required-icon">*</label>
      <InputText v-model.trim="store.form.username" required="true" class="w-12 flex" :class="{'p-invalid': submitted && !store.form.username}"  />
      <small class="p-error" v-if="submitted && !store.form.username">用户名称必填</small></div><div class="field mr-3">
  <label>用户昵称</label><label class="required-icon">*</label>
      <InputText v-model.trim="store.form.nickname" required="true" class="w-12 flex" :class="{'p-invalid': submitted && !store.form.nickname}"  />
      <small class="p-error" v-if="submitted && !store.form.nickname">用户昵称必填</small></div><div class="field mr-3">
  <label>权限类型</label><label class="required-icon">*</label>
      <InputText v-model.trim="store.form.permissionType" required="true" class="w-12 flex" :class="{'p-invalid': submitted && !store.form.permissionType}"  />
      <small class="p-error" v-if="submitted && !store.form.permissionType">权限类型必填</small></div>
          <template #footer>
            <Button :label="$t('common.cancel')" icon="pi pi-times" class="p-button-text" @click="handleCancel"/>
            <Button :label="$t('common.confirm')" icon="pi pi-check" class="p-button-text" @click="handleSave" />
          </template>
        </Dialog>

        <Dialog v-model:visible="deleteDialog" :style="{width: '300px'}" :header="$t('common.delete')" :modal="true">
          <div class="flex align-items-center justify-content-center">
            <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
            <span>{{ $t("common.confirmDelete") }}</span>
          </div>
          <template #footer>
            <Button :label="$t('common.cancel')" icon="pi pi-times" class="p-button-text" @click="deleteDialog = false"/>
            <Button :label="$t('common.confirm')" icon="pi pi-check" class="p-button-text" @click="handleDelete" />
          </template>
        </Dialog>

      </div>
    </div>
  </div>
</template>

<script setup>
import {onUnmounted, ref} from "vue";
import store from '../store/store/counterpartyPermission.js'
import {checkTabPath, getCurrentGlobalProperties, httpGet} from '@frontend/vue-common'
import {checkAuth} from "@frontend/vue-common";

const  matchPath = '/soms/counterparty_permission'

const dialog = ref(false)
const submitted = ref(false)
const dialogTitle = ref("")
const deleteDialog = ref(false)
const checkDialog = ref(false)

function onEventQuery(event) {
  if (event.page ) {
    store.pageNum = event.page + 1
  } else {
    store.pageNum = 1
  }
  store.pageSize = event.rows
  store.sortField = event.sortField
  store.sortOrder = event.sortOrder
  handleQuery()
}

function confirmDeleteSelected() {
  deleteDialog.value = true
}

function handleQuery() {
  if(checkListAuth()){
    store.listCounterpartyPermission()
  }
}

function clearFilters(){
  store.cleanFilter()
  store.listCounterpartyPermission()
}

function dialogAdd() {
  dialog.value = true
  submitted.value = false
  dialogTitle.value = "新增"
  store.cleanForm()
}

function handleSave() {
  submitted.value = true
  if(dialogTitle.value === "新增"){
    if (validation()) {
      store.addCounterpartyPermission(store.form).then(()=> {
        dialog.value = false
        submitted.value = false
      })
    }
  }else {
    if (validation()) {
      store.editCounterpartyPermission().then(()=> {
        dialog.value = false
        submitted.value = false
      })
    }
  }

}

function handleCancel() {
  dialog.value = false
  store.cleanForm()
}


function dialogEdit(row){
  submitted.value = false
  dialogTitle.value = "编辑"
  store.cleanForm()
  store.form.id = row.id
  $vue_page_edit_form_field_loop_area$
  dialog.value = true
}

function dialogDelete(row){
  store.form.id = row.id
  deleteDialog.value = true
}

function handleDelete(){
  let selectedIds = []
  if (store.selected && store.selected.length > 0) {
    selectedIds.push(...store.selected.map(i=>{return i.id}))
  }
  selectedIds.push(store.form.id)
  store.deleteCounterpartyPermission(selectedIds).then(()=>{
    deleteDialog.value = false
  })
}

function validation() {
  // 自行替换
  /*if (store.form.???) {
    return true
  }*/
  return false
}

function checkListAuth(){
  return checkAuth(process.env.VUE_APP_MODULE_CODE, matchPath, 'query')
}

function checkAddAuth(){
  return checkAuth(process.env.VUE_APP_MODULE_CODE, matchPath, 'add')
}

function checkEditAuth(){
  return checkAuth(process.env.VUE_APP_MODULE_CODE, matchPath, 'edit')
}

function checkDeleteAuth(){
  return checkAuth(process.env.VUE_APP_MODULE_CODE, matchPath, 'delete')
}

handleQuery()

onUnmounted(() => {
  if (!checkTabPath(matchPath)) {
    store.cleanAll()
  }
})

</script>

<style lang="scss" scoped>
.required-icon{
  color: #D32F2F;
}
</style>